<!--<script>-->
<!--import MdMVVMObject from '../../common/mixins/MdMVVMObject';-->

<!--export default {-->
<!--	mixins: [MdMVVMObject],-->
<!--	props: {-->
<!--		options: Array-->
<!--	},-->
<!--	data() {-->
<!--		return {-->
<!--			childNode: [],-->
<!--			items: [],-->
<!--			expandKey: []-->
<!--		}-->
<!--	},-->
<!--	created() {-->
<!--		this.genChildNode();-->
<!--	},-->
<!--	methods: {-->
<!--		watchValue() {-->
<!--			console.info('cccccccc')-->
<!--			this.items = this.getItems(this.options);-->
<!--			this.genChildNode();-->
<!--		},-->
<!--		getItems(items = []) {-->
<!--			return items.map(item => {-->
<!--				if (item.children) {-->
<!--					item.children = this.getItems(item.children);-->
<!--				}-->
<!--				item.expand = this.expandKey.includes(item.id);-->
<!--				item.indeterminate = false;-->
<!--				item.checked = this.data.includes(item.id);-->
<!--				return item-->
<!--			})-->
<!--		},-->
<!--		genChildNode() {-->
<!--			this.childNode = this.buildTree(this.items)-->
<!--		},-->
<!--		buildTree(data = []) {-->
<!--			return data.map(item => {-->
<!--				return (<li class="md-tree-view-list">-->
<!--					<div class="md-tree-view-title">-->
<!--						{this.getExpandBtn(item)}-->
<!--						{this.getCheckBox(item)}-->
<!--						{item.menuName}-->
<!--					</div>-->
<!--					{this.getChildren(item)}-->
<!--				</li>)-->
<!--			})-->
<!--		},-->
<!--		getExpandBtn(item) {-->
<!--			if (item.children) {-->
<!--				return <span class={{btn: true, spin: item.expand}} onClick={() => this.onExpandTarget(item)}><v-icon>fa-caret-right</v-icon></span>-->
<!--			}-->
<!--			return <span class="btn"/>-->
<!--		},-->
<!--		getCheckBox(item) {-->
<!--			let props = {dense: true, ripple: true, value: item.id, indeterminate: item.indeterminate};-->
<!--			return <v-checkbox {...{props}} vModel={this.data} onChange={(e) => this.onCheckBoxChange(item, e)}/>-->
<!--		},-->
<!--		getChildren(item) {-->
<!--			if (item.children) {-->
<!--				return <v-expand-transition>-->
<!--					<ul class="md-tree-group" vShow={item.expand}>{this.buildTree(item.children)}</ul>-->
<!--				</v-expand-transition>-->
<!--			}-->
<!--		},-->
<!--		onExpandTarget(item) {-->
<!--			item.expand = !item.expand;-->
<!--			if (item.expand === true) {-->
<!--				this.expandKey.push(item.id);-->
<!--			} else {-->
<!--				this.expandKey = this.expandKey.filter(id => id !== item.id);-->
<!--			}-->
<!--			this.genChildNode();-->
<!--		},-->
<!--		onCheckBoxChange(item, e = []) {-->
<!--			this.$nextTick(() => {-->
<!--				if (e.includes(item.id)) {-->
<!--					if (item.children) {-->
<!--						let ids = []-->
<!--						this.getChildrenIds(item.children, ids);-->
<!--						this.data = Array.from(new Set([...this.data, ...ids]));-->
<!--					}-->
<!--				} else {-->
<!--					if (item.children) {-->
<!--						let ids = []-->
<!--						this.getChildrenIds(item.children, ids);-->
<!--						this.data = this.data.filter(id => ids.includes(id) === false);-->
<!--					}-->
<!--				}-->
<!--			})-->
<!--		},-->
<!--		getChildrenIds(data = [], ids = []) {-->
<!--			data.forEach(item => {-->
<!--				ids.push(item.id);-->
<!--				if (item.children) {-->
<!--					this.getChildrenIds(item.children, ids);-->
<!--				}-->
<!--			})-->
<!--		}-->
<!--	},-->
<!--	render(createElement, context) {-->
<!--		return (<ul class="md-tree-view">-->
<!--			{this.childNode}-->
<!--		</ul>)-->
<!--	},-->
<!--	watch: {-->
<!--		async options() {-->
<!--			await this.$nextTick();-->
<!--			this.watchValue();-->
<!--		}-->
<!--	}-->
<!--}-->
<!--</script>-->

<!--<style scoped lang="scss">-->
<!--.md-tree-view {-->
<!--	display: block;-->
<!--	list-style: none;-->
<!--	padding: 0;-->
<!--	margin: 0;-->

<!--	.md-tree-view-list {-->
<!--		line-height: 30px;-->

<!--		.md-tree-view-title {-->
<!--			display: flex;-->
<!--			align-items: center;-->
<!--		}-->

<!--		.btn {-->
<!--			display: inline-block;-->
<!--			width: 20px;-->
<!--			height: 23px;-->
<!--			vertical-align: middle;-->
<!--			transform: rotate(0);-->
<!--			transition: transform .3s;-->

<!--			i {-->
<!--				display: flex;-->
<!--				cursor: pointer;-->
<!--			}-->

<!--			&.spin {-->
<!--				transform: rotate(90deg);-->
<!--			}-->
<!--		}-->

<!--		.v-input&#45;&#45;checkbox {-->
<!--			display: inline-block;-->
<!--			margin-top: 0;-->
<!--			padding: 0;-->
<!--			width: 23px;-->
<!--			height: 23px;-->
<!--			vertical-align: middle;-->
<!--			margin-right: 5px;-->

<!--			::v-deep {-->
<!--				.v-input__control {-->
<!--					height: 23px;-->

<!--					.v-input__slot {-->
<!--						margin: 0;-->

<!--						.v-input&#45;&#45;selection-controls__input {-->
<!--							margin-right: 0;-->
<!--						}-->
<!--					}-->
<!--				}-->
<!--			}-->
<!--		}-->
<!--	}-->

<!--	.md-tree-group {-->
<!--		padding-left: 20px;-->
<!--		display: block;-->
<!--		list-style: none;-->
<!--		margin: 0;-->
<!--	}-->
<!--}-->
<!--</style>-->

<template>
	<div class="md-tree-view">
		<tree :nodes="nodes" :setting="treeSetting" @onCheck="onCheck" ref="tree" @onExpand="onExpand" @onCollapse="onCollapse"/>
	</div>
</template>

<script>

import MdMVVMObject from '../../common/mixins/MdMVVMObject';
import tree from 'vue-giant-tree/dist/vue-giant-tree.umd.min';

export default {
	name: 'MdTreeView',
	mixins: [MdMVVMObject],
	components: {tree},
	props: {
		options: {
			type: Array,
			default: () => []
		},
		setting: Object
	},
	data() {
		return {
			defSet: {
				check: {
					enable: true
				},
				data: {
					simpleData: {
						enable: true,
						pIdKey: 'pid'
					}
				},
				view: {
					showIcon: false,
					addHoverDom: this.addHoverDom,
					removeHoverDom: this.removeHoverDom
				}
			},
			openKey: []
		}
	},
	computed: {
		treeSetting() {
			return Object.assign(this.defSet, this.setting);
		},
		nodes() {
			return this.options.map(item => {
				item.checked = this.data && this.data.includes(item.id);
				item.open = this.openKey.includes(item.id);
				return item;
			});
		}
	},
	methods: {
		onCheck() {
			this.$nextTick(() => {
				this.data = this.$refs.tree.ztreeObj.getCheckedNodes().filter(item => item.checked).map(item => item.id);
			})
		},
		onExpand() {
			this.openKey = this.$refs.tree.ztreeObj.getNodesByFilter((item) => {
				return item.open === true
			}).map(item => item.id)
		},
		onCollapse() {
			this.onExpand();
		},
		watchValue() {
			// this.openKey = []
		}
	}
}
</script>

<style scoped lang="scss">
.md-tree-view {
	::v-deep {
		.ztree {
			li {
				min-height: 40px;

				.button.switch {
					height: 39px;
					line-height: 39px;

					&.center_open,
					&.center_close,
					&.bottom_open,
					&.bottom_close {
						&:before {
							margin-top: 9px;
							margin-left: 4px;
						}
					}
				}

				.button.checkbox_true_part:after {
					width: 9px;
				}
			}
		}
	}
}
</style>